<script>
import { defineComponent, getCurrentInstance, ref } from "vue";
import { useCounterStore } from "../stores";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const statuss = ref(0);
    const store = useCounterStore();
    const userName = ref(sessionStorage.getItem("userName"));
    const statusCount = ref(0);
    const messageArray = ref([]);
    const activeName = ref("1");
    const messageList = () => {
      let status = 0;
      proxy.$http.get(`/system/user/get/${userName.value}`).then(res => {
        proxy.$http.get(`system/msg/user/${res.data[0].userId}`).then(res => {
          for (var i = 0; i < res.data.length; i++) {
            messageArray.value = [res.data[i], ...messageArray.value];
            if (res.data[i].status === 0) {
              status++;
            }
          }
          store.setStatuCount(status);
        });
      });
    };
    const deleteAll = () => {
      let allIds = [];
      for (var i = 0; i < messageArray.value.length; i++) {
        allIds = [messageArray.value[i].msgId, ...allIds];
      }
      proxy.$http.delete(`system/msg/list`);
    };
    const deleteReaded = () => {};
    const editStatu = data => {
      proxy.$http
        .put(`system/msg/`, {
          msgId: data,
          status: 1
        })
        .then(res => {});
    };
    messageList();
    return {
      userName,
      statuss,
      messageArray,
      messageList,
      statusCount,
      activeName,
      editStatu,
      deleteReaded,
      deleteAll
    };
  }
});
</script>

<template>
  <div class="demo-collapse">
    <div v-if="messageArray.length!=0" style="padding-bottom:10px">
      <el-button type="primary" class="hvr-grow" @click="deleteReaded()">删除已读</el-button>
      <el-button type="primary" class="hvr-grow" @click="deleteAll()">全部删除</el-button>
    </div>
    <div v-if="messageArray.length==0">
      <h1>您尚未有新的消息</h1>
    </div>
    <el-collapse v-model="activeName" accordion v-for="(item,i) in messageArray" :key="i" v-else>
      <div>
        <el-badge :is-dot="item.status!=1" class="item"></el-badge>
      </div>
      <el-collapse-item :title="`新消息`+(i+1)" :name="i" @click="editStatu(item.msgId)">
        <div>{{ item.content }}</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped>
.item {
  position: absolute;
  right: 60px;
}
</style>
